<template>
  <li>
    {{product.name}}
    <input v-model.number="product.num" class="num"/>
    <button @click="product.num += 1">Add</button>
    <button @click="product.num -= 1">Reduce</button>
    <span v-if="product.num<=0" class="warn">--已经售罄</span>
  </li>
</template>

<script>
export default {
  name: 'ProductItem',
  props: ['product']
}
</script>

<style scoped>
  li {
    background-color: aliceblue;
    color: green;
    width: 500px;
  }
  .warn {
    color: orangered;
  }
  .num {
    width: 30px;
  }
</style>
